<!DOCTYPE html>
<html lang="en" style="height: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>外汇交易系统</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/morris/morris-0.4.3.min.css">
    <link rel="stylesheet" href="/js/plugins/gritter/jquery.gritter.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">

    <style>
        span {
            text-align: left;
            font-size: 15px;
            font-family: 微软雅黑;
        }

        a {
            text-align: left;
            font-size: 15px;
            font-family: 微软雅黑;
        }

    </style>


</head>
<body>
<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/echarts/echarts.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-editable.js"></script>
<script src="/bootstrap/js/bootstrap-table.min.js"></script>
<script src="/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/plugins/pace/pace.min.js"></script>
<script src="/js/index.js"></script>
<div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation" id="menuNav">
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element" style="margin: 0 auto; width: 50%;">
                        <span>
                            <img alt="image" class="img-circle" src="" style="width: 64px;height: 64px;"/>
                        </span>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span>
                                    <span style=" margin-left: -30px">
                                        <strong class="font-bold" id="user"></strong>
                                    </span>
                                </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs" style="margin-left: -37px;">
                            <li><a href="/logout">安全退出</a>
                            </li>
                            <li onclick="unsubscribe()"><a href="/logout">用户注销</a>
                            </li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        外汇交易
                    </div>
                </li>
                <li th:each="menu:${menusList}" th:id="${menu.getId()}">
                    <a th:href="${menu.getUrl()}" target="left_content" th:onclick="|checkMenuNode(${menu.id},${menu.subMenu.size()})|">
                        <i th:class="${menu.getIcon()}" aria-hidden="true"></i>
                        <span class="nav-label" th:text="${menu.getTitle()}"></span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <iframe name="left_content"  scrolling="no" src="index.html"  style="width:100%" onload="resizeIframe(this)"></iframe>

</div>


<script>

    function resizeIframe(iframe) {
        var iframeBody = iframe.contentDocument || iframe.contentWindow.document;
        var iframeBodyHeight = Math.max(iframeBody.body.scrollHeight, iframeBody.documentElement.scrollHeight);
        iframe.height = iframeBodyHeight;
    }

    function checkMenuNode(id,menuSize) {

        //获取li标签,方便追加子菜单
        var liElement = document.getElementById(id);

        //判断子菜单是否已显示
        let existChildMenu = hasUlInsideLi(liElement);
        //如果子菜单已存在,则移除ul标签
        if(existChildMenu){
            // 查找所有ul子元素
            var ulElements = liElement.getElementsByTagName('ul');
            // 循环遍历并删除所有ul元素
            for (var i = ulElements.length - 1; i >= 0; i--) {
                liElement.removeChild(ulElements[i]);
            }
        }



        //当父菜单存在子菜单时加载
        if(menuSize != 0 && !existChildMenu){
            console.log("子菜单个数："+ menuSize);
            //获取子菜单数据
            $.ajax({
                url : "/user/childMenu",
                type : "post",
                data : {
                    parentId : id,
                },
                dataType : "json",
                success : function(response) {
                    if (response.state === 200){
                        console.log("加载子菜单成功");
                        for (let i = 0; i <response.data.length ; i++) {
                            //根据parentId确认需要生成子菜单的li标签.
                            var parentId = response.data[i].parentId;
                            var title = response.data[i].title;
                            var url = response.data[i].url;
                            var icon = response.data[i].icon;

                            var role = response.data[i].roleId;
                            if(role == 1){
                                role = "admin";
                            }

                            //创建ul标签
                            var ulTag = document.createElement("ul");
                            //为ul标签设置样式
                            ulTag.classList.add("nav","nav-second-level");

                            ulTag.innerHTML = '<li>' +
                                '<a target="left_content" href="'+url+'" >' +
                                '<i aria-hidden="true" class="'+icon+'"></i>' +title+
                                '</a>' +
                                '</li>'

                            //追加ul
                            liElement.appendChild(ulTag);

                            //特殊处理获取个人资料的菜单Id
                            var id = response.data[i].id
                            if(id == 17){
                                $("a[href='/userset']").attr("href","/userset?userName="+window.sessionStorage.getItem("userName"));
                            }

                        }
                    }else {
                        console.log("加载子菜单失败");
                    }
                }
            })
        }

    }

    function hasUlInsideLi(liElement) {

        //判断是否存在ul标签
        var hasUl = liElement.querySelector('ul');
        if(hasUl !== null){
            return true; // 存在ul标签
        }
        return  false//不存在
    }

    function unsubscribe() {

        $.ajax({
            url : "/user/deleteUser",
            type : "post",
            data : {
                userId : window.sessionStorage.getItem("userId"),
            },
            dataType : "json",
            success : function(data) {
                if (data.state === '200') {
                    //location.href = "/logout";
                    return true;
                }else {
                    toastr.error("注销客户不成功");
                    return false;
                }
            }
        })

    }

</script>

</body>
</html>

